<template>
 <div id="left">
  <el-row>
    <el-col>
      <el-menu
        default-active='/'
        :collapse="collapse"
        class="el-menu-vertical-demo"
        router
      >
        <el-menu-item index="/">
          <i class="el-icon-menu"></i>
          <span>首页</span>
        </el-menu-item>
        <el-submenu index="1">
          <template #title>
              <i class="el-icon-tickets"></i><span style="color:#B4C3D6">历史文化</span>
          </template>
            <el-menu-item index="/journal/post">发表文章</el-menu-item>
            <el-menu-item index="/journal/administration">文章管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template #title>
              <i class="el-icon-picture"></i><span style="color:#B4C3D6">历史回忆</span>
          </template>
          <el-submenu index="2-1">
            <template #title>
              <i class="el-icon-s-promotion
"></i><span style="color:#B4C3D6">封面相册</span>
            </template>
           <el-menu-item index='/album/CoverPublish'>相册发布</el-menu-item>
           <el-menu-item index="/album/CoverManage">相册管理</el-menu-item>
          </el-submenu>
          <el-submenu index="2-2"> 
            <template #title>
              <i class="el-icon-magic-stick"></i><span style="color:#B4C3D6">动态相册</span>
            </template>
            <el-menu-item index="/album/DynamicPublish">相册发布</el-menu-item>
            <el-menu-item index="/album/DynamicManage">相册管理</el-menu-item>
          </el-submenu>
          <el-submenu index="2-3">
            <template #title>
              <i class="el-icon-camera"></i><span style="color:#B4C3D6">静态相册</span>
            </template>
            <el-menu-item index="/album/StaticPublish">相册发布</el-menu-item>
            <el-menu-item index="/album/StaticManage">相册管理</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="/Personal">
          <i class="el-icon-s-custom"></i>
          <span>个人信息</span>
        </el-menu-item>
        <el-submenu index="4">
          <template #title>
              <i class="el-icon-s-promotion"></i><span style="color:#B4C3D6">文化精神</span>
          </template>
          <el-menu-item index="/share/publish">发表文章</el-menu-item>
          <el-menu-item index="/share/manage">文章管理</el-menu-item>
        </el-submenu>
        <el-menu-item index="/message/manage">
          <i class="el-icon-message"></i>
          <span>留言管理</span>
        </el-menu-item>
        <el-submenu index="6">
          <template #title>
              <i class="el-icon-key"></i><span style="color:#B4C3D6">用户管理</span>
          </template>
          <el-menu-item index="/user/information">修改信息</el-menu-item>
          <el-menu-item index="/user/power">权限管理</el-menu-item>
          <el-menu-item index="/user/add">添加管理员</el-menu-item>
          <el-menu-item index="/user/user">用户管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
 </div>
</template>
 
<script>
import {mapState} from "vuex"
export default {
  name: '',
  data(){
    return{
    }
  },
  computed:{
    ...mapState(['collapse'])
  }
}
</script>

<style scoped lang='less'>
#left{
  width: 100%;
  height: 100%;
  background-color: #304155;
  user-select: none;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
  .el-radio-group{
    margin: 0 auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .el-row{
    .el-col{
      .el-menu{
        .el-menu-item{
          background-color: #304155;
          color: #B4C3D6;
        }
        .is-active{
          color: #3D9FFE;
        }
        .el-submenu{
          background-color: #304155;
          color: #B4C3D6;
          .el-menu-item{
            background-color: #202D3D;
          }
        }
      }
    }
  }
}
</style>